<template>
  <div>
    <el-form :model="form" ref="userForm" :rules="rules">
            <el-form-item label="头像" :label-width="formLabelWidth" prop="dialogImageUrl">
            <el-upload
       action=""
       :http-request="Upload"
       :data="Aliyun"
       :multiple="false"
       :show-file-list="true"
       list-type="picture-card"
        :file-list="fileList"
       :on-preview="handlePictureCardPreview"
       :on-remove="handleRemove"
       :limit="1"
      >
         <i class="el-icon-plus" />
         </el-upload>
         <el-dialog :visible.sync="dialogVisible">
          <img :src="dialogImageUrl" alt="">
         </el-dialog>
        </el-form-item>

    <el-form-item label="店铺名称" :label-width="formLabelWidth" prop="name">
      <el-input :disabled="this.isedit == true ? true : false" placeholder="请输入店铺名称" v-model="form.name"></el-input>
    </el-form-item>

    <el-form-item  label="商品类别" :label-width="formLabelWidth" prop="categoryId">
       <el-select v-model="form.categoryId" placeholder="请选择">
    <el-option
      v-for="item in sunmter"
      :key="item.name"
      :label="item.name"
      :value="item.id">
    </el-option>
  </el-select>
    </el-form-item>
      
    <el-form-item label="宣传标语" :label-width="formLabelWidth" prop="slogan">
      <el-input placeholder="宣传标语" v-model="form.slogan"></el-input>
    </el-form-item>
    <!-- 测试 -->
    <el-form-item label="销售区域" :label-width="formLabelWidth" prop="saleAreaAll">
<el-select v-model="form.saleAreaAll" placeholder="销售范围">
             <el-option label="全国" :value="true"></el-option>
             <el-option label="区域范围销售" :value="false"></el-option>
             </el-select>
               <el-cascader
        v-if="this.form.saleAreaAll == false"
        placeholder="请输入城市"
       v-model="listinfo.saleAreaCounty || listinfo.saleAreaCity || listinfo.saleAreaProvince"
    :options="jsonData"
     :props="{ checkStrictly: true }"
    clearable
    @change="handle"></el-cascader> 
    </el-form-item>
<!-- listinfo.saleAreaCounty == '' ? listinfo.saleAreaCity : listinfo.saleAreaProvince -->

   <el-form-item label="客服手机号" :label-width="formLabelWidth" prop="kfPhone">
      <el-input placeholder="请输入客服手机号" v-model="form.kfPhone"></el-input>
    </el-form-item>
     <el-form-item label="密码" :label-width="formLabelWidth" prop="password">
      <el-input v-if="this.isedit == true" :disabled="this.isedit == true ? true : false" placeholder="请输入密码" type="password" v-model="form.password"></el-input>
      <el-input v-else :disabled="this.isedit == true ? true : false" placeholder="请输入密码" v-model="form.password"></el-input>
    </el-form-item>
    <el-form-item label="店铺收款人姓名" :label-width="formLabelWidth" prop="payeeName">
      <el-input  placeholder="店铺收款人姓名" v-model="form.payeeName"></el-input>
    </el-form-item>
     <el-form-item label="收款人卡号" :label-width="formLabelWidth" prop="payeeCardNumber">
      <el-input placeholder="收款人卡号" v-model="form.payeeCardNumber"></el-input>
    </el-form-item>
    <el-form-item label="开户行信息" :label-width="formLabelWidth" prop="payeeBankInfo">
      <el-input  placeholder="开户行信息" v-model="form.payeeBankInfo"></el-input>
    </el-form-item>

     <el-form-item class="acnvu" label="店铺地址"  
      :prop="'region.' + 'county'" :label-width="formLabelWidth"
      :rules="[{required:true,message:'单位不能为空',trigger:'blur'}]"
     >       
        <el-cascader
        placeholder="请输入城市"
    v-model="form.region.county"
    :options="jsonData"
    :props="{ expandTrigger: 'true' }"
    clearable
    @change="handleChange"></el-cascader>
        </el-form-item>
    <el-form-item label="详细地址" :label-width="formLabelWidth" prop="detailAddress">
      <el-input placeholder="请输入详细地址" v-model="form.detailAddress"></el-input>
    </el-form-item>
  </el-form>
   <div slot="footer" class="dialog-footer">
    
    <el-button size="small" @click="quxiao">取 消</el-button>
    <el-button size="small" type="primary" :disabled="this.isEditad == true ? true : false" @click="addcinge">确 定</el-button>
  </div>
  </div>
</template>
<script>
import {provinces} from '@/constant/citys'
import {pediting,register} from '@/api/limits'
import {ossmessage,ossuploading } from '@/api/oss'
import { client } from '@/components/Hamburger/ossss'
import {ification} from '@/api/user'
export default {
  name:"Suerent",
  props:{
    isedit: {
      type: Boolean,
      required: true
    },
    childata:{
      type: Object,
      require: true
    },
    isEditad:{
       type: Boolean,
      required: true
    }
     },
 data () {
  return {
    jsonData:[],
    formLabelWidth:'130px',
    regio:{},
    reg:'',
    sunmter:[],
    form:{
     name: "",
     kfPhone:'',
     avatar:'',
     password: '',
     region: {
      province: "",
      city: "",
      county: ""
     },
     register:'', //宣传标语
    detailAddress: "",
    saleAreaAll:true,
    saleAreaProvince:'', //省
    saleAreaCity:'', //市
    saleAreaCounty:'', //区
    categoryId:'',
    payeeName:'',
    payeeCardNumber:'',
    payeeBankInfo:'',
   },
   listinfo:{
    saleAreaProvince:'', //省
    saleAreaCity:'', //市
    saleAreaCounty:'', //区
   },
    Aliyun:{},
    dialogVisible:false,
    dialogImageUrl: '',
    fileList:[],
    progress: 0, // 进度条
    imgUrl: [], // 存上传后的图片url
    rules:{
   
      name:[
       { required: true, message: '店铺名称不能为空', trigger: 'blur' },
    ],
      password:[
       { required: true, message: '密码不能为空', trigger: 'blur' },
       { min: 4, max: 15, message: '用户姓名为6-15位', trigger: 'blur' }
    ],
    categoryId:[
      { required: true, message: '商品类别不能为空', trigger: 'blur' },
    ],
    saleAreaAll:[
      { required: true, message: '销售区域不能为空', trigger: 'blur' },
    ],
    payeeName:[
     { required: true, message: '收款人姓名不能为空', trigger: 'blur' },
    ],
      detailAddress:[
       { required: true, message: '详细地址不能为空', trigger: 'blur' },
    ],
      kfPhone:[
       { required: true, message: '客服手机号不能为空', trigger: 'blur' },
       { min:11, max:11, pattern: /^1[3-9]\d{9}$/, message: "请输入正确的手机号", trigger: "blur"},
    ],
     payeeCardNumber:[
      { required: true, message: '卡号不能为空', trigger: 'blur' },
     ],
     payeeBankInfo:[
       { required: true, message: '开户行不能为空', trigger: 'blur' },
     ],
      slogan:[
       { required: true, message: '宣传标语不能为空', trigger: 'blur' },
     ]
   }
   } 
  },
  
  created(){
    this.loafigthel()
    this.hovern()
     this.loachyer()
  },
 methods:{
   async hovern(){
    console.log(this.isedit);
      const res = await provinces()
    for(let i = 0; i < res.length; i++){
      this.jsonData.push({value:res[i].name,label:res[i].name})
      this.jsonData[i].children=[]
       if(res[i].city.length>0){
            for(let j = 0;j<res[i].city.length;j++){
              this.jsonData[i].children.push({value:res[i].city[j].name,label:res[i].city[j].name})
              this.jsonData[i].children[j].children=[]
            for(let k = 0; k<res[i].city[j].area.length;k++){
              this.jsonData[i].children[j].children.push({value:res[i].city[j].area[k],label:res[i].city[j].area[k]})
            }
            }
          }
    }
    if(this.isedit == true){
     this.regio = JSON.parse(this.childata.region);
      this.form = this.childata
      this.form.region = this.regio
      this.form.password = Math.random().toFixed(6).slice(-6)

      this.listinfo.saleAreaProvince = this.childata.saleAreaProvince
      this.listinfo.saleAreaCity = this.childata.saleAreaCity
      this.listinfo.saleAreaCounty = this.childata.saleAreaCounty

      if (this.childata.avatar != null) {
         this.fileList.push({'url':this.childata.avatar})
      }

    } else {
     this.regio = JSON.parse(this.childata.region);

      this.form = this.childata
      this.form.region = this.regio
      this.form.password = Math.random().toFixed(6).slice(-6)
      if (this.childata.avatar != null) {
         this.fileList.push({'url':this.childata.avatar})
      }

    }
  },
 // 获取分类
    async loachyer(){
        const res = await ification()
        this.sunmter = res.data
    },
    //  获取签名
     async loafigthel() {
          const { data } = await ossmessage({
        'ossGroup':'UserAvatar'
      })
          this.Aliyun = data
        
          },
            // 上传图片
  Upload(file) {
   const that = this
   // 判断扩展名
   const tmpcnt = file.file.name.lastIndexOf('.')
   const exname = file.file.name.substring(tmpcnt + 1)
   const names = ['jpg', 'jpeg', 'png','webP']
   if (names.indexOf(exname) < 0) {
    this.$message.error('不支持的格式!')
    return
   }
   if (file.size > 1024 * 1024) {
    this.$message.error('图片大小最大1M')
    return
   }
  
   async function multipartUpload() {
    const listdata = await ossuploading({
      'fileName':'.jpg','ossGroup':'UserAvatar'
    })
     let fileName = listdata.data.path
    //  console.log('741',fileName);
    //  console.log('999',file);
    client(that.Aliyun).put(fileName, file.file,
     {
      progress: function(p) { // 获取进度条的值
      //  console.log('777',p)
       that.progress = p * 100
      }
     }).then(
     result => {
      // 下面是如果对返回结果再进行处理，根据项目需要
      // console.log(result)
      // that.imgUrl = 'http://' + result.bucket + '.' + that.Aliyun.endpoint + '/' + result.name
      that.dialogImageUrl = result.url
      that.form.avatar = that.dialogImageUrl
        console.log('123',that.form);
      that.imgUrl.push({
       name: file.file.name,
       url: result.url
      })
       that.fileList.push( {'url': result.url,})
   
     })
   }
   multipartUpload()
  },
  // 图片预览
  handlePictureCardPreview(file) {
   this.dialogImageUrl = file.url
   this.dialogVisible = true
  },
  // 删除图片
  handleRemove(file, fileList) {
   console.log(file)
   for (var i in this.imgUrl) {
    if (this.imgUrl[i].name === file.name) {
     this.imgUrl.splice(i, 1)
    }
   }
      for (let i in this.fileList) {
     if (this.fileList[i].uid == file.uid) {
     this.fileList.splice(i, 1)
    }
    
   }
  //  console.log(this.imgUrl);
  },
  
    // 选择城市
    async handleChange(aaa){
    // [this.form.region.province,this.form.region.city,this.form.region.province]
     this.form.region.province = aaa[0]
     this.form.region.city = aaa[1]
     this.form.region.county = aaa[2]
     
   },
   handle(aaa){
   console.log(aaa);
   this.form.saleAreaProvince = aaa[0]
   this.form.saleAreaCity = aaa[1]
   this.form.saleAreaCounty = aaa[2]
   },
  // 确认
   addcinge(){
     this.$refs.userForm.validate(async (valid) => {
        if(!valid) return
        try{
          if(this.isedit == true){
            const reb = await pediting(this.form)
            this.$message.success(reb.msg)
          } else if(this.isedit == false){
            const res = await register(this.form)
           this.$message.success(res.msg)
           
            }
          } catch(e){
             this.$message.error(e.msg)
          }
       this.$emit('close')
     })
  },
  // 取消
  quxiao(){
    if(this.isedit==true){
      console.log('编辑');
    }else{
     console.log('新增');
    }
    this.$emit('close')
  }
 }
}
</script>

<style scoped>
.el-cascader{
  width: 100%;
}

.dialog-footer{
 width: 30%;
 margin-left: 72%;
}
.el-select{
  width: 100%;
}
::v-deep .el-upload--picture-card{
    width: 100px !important;
    height: 100px !important;
    line-height: 110px !important;
}
::v-deep .el-upload-list__item{
        width: 100px !important;
    height: 100px !important;
    line-height: 110px !important;
}
</style>